<template>
  <el-dialog
    :title="`${detailId ? '修改' : '新增'}目录`"
    :visible.sync="dialogVisible"
    @close="closeDialog"
    @open="open"
    width="22%"
    >
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" >
      <el-form-item v-if="!id"  label="所属学科" prop="subjectID">
        <el-select  style="width: 100%;" size="small" v-model="ruleForm.subjectID" placeholder="请选择学科">
          <el-option
            v-for="item in shujuLeix"
            :key="item.id"
            :value="item.subjectID"
            :label="item.subjectName"
          />
        </el-select>
      </el-form-item>
      <el-form-item  label="目录名称" prop="tagName">
        <el-input  v-model="ruleForm.tagName"></el-input>
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center">
      <el-button size="small" @click="close">取消</el-button>
      <el-button size="small" type="primary" @click="addlabel">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { add, update } from '../../../api/hmmm/tags'
export default {
  props: {
    reviseLables: {
      type: Object
    },
    detailId: {
      type: String
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    shujuLeix: {
      type: Array
    }
  },
  methods: {
    async close () {
      this.dialogVisible = false
      this.$message('已取消添加')
    },
    addlabel () {
      if (this.detailId === '') {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            add({ ...this.ruleForm })
            this.$message.success('添加成功')
            this.$emit('close-dialog')
          } else {
            this.$message.error('每一项都不能为空')
          }
        })
      } else {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            update(this.ruleForm)
            this.$message.success('修改成功')
            this.$emit('close-dialog')
          } else {
            this.$message.error('每一项都不能为空')
          }
        })
      }
    },
    closeDialog () {
      this.$emit('close-dialog')
      this.ruleForm = {
        subjectID: '',
        tagName: ''
      }
    },
    open () {
      if (this.detailId) {
        this.ruleForm.subjectID = this.reviseLables.subjectID
        this.ruleForm.tagName = this.reviseLables.tagName
        this.ruleForm.id = this.detailId
      }
      this.id = this.reviseLables.subjectID
      console.log(this.id)
      this.ruleForm.subjectID = Number(this.reviseLables.subjectID)
      console.log(this.ruleForm)
    }
  },
  data () {
    return {
      id: '',
      ruleForm: {
        id: '',
        subjectID: null,
        tagName: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '目录不能为空', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

<style>

</style>
